{% extends "admin/base.html" %}

{% block title %}课程管理 - 管理后台 - 万岛潜水{% endblock %}

{% block page_title %}课程管理{% endblock %}

{% block page_actions %}
<button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addCourseModal">
    <i class="fas fa-plus me-1"></i> 添加课程
</button>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <div class="row mb-3">
            <div class="col-md-6">
                <form method="get" action="{{ url_for('main.admin_courses') }}" class="d-flex">
                    <input type="text" name="search" class="form-control me-2" placeholder="搜索课程名称" value="{{ request.args.get('search', '') }}">
                    <button type="submit" class="btn btn-outline-primary">搜索</button>
                </form>
            </div>
            <div class="col-md-6 text-end">
                <div class="btn-group">
                    <a href="{{ url_for('main.admin_courses', filter='all') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'all' or not request.args.get('filter') %}active{% endif %}">全部</a>
                    <a href="{{ url_for('main.admin_courses', filter='experience') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'experience' %}active{% endif %}">体验潜水</a>
                    <a href="{{ url_for('main.admin_courses', filter='certified') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'certified' %}active{% endif %}">执证潜水</a>
                    <a href="{{ url_for('main.admin_courses', filter='certification') }}" class="btn btn-outline-secondary {% if request.args.get('filter') == 'certification' %}active{% endif %}">考证课程</a>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>图片</th>
                        <th>名称</th>
                        <th>类型</th>
                        <th>价格</th>
                        <th>时长</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for course in courses %}
                    <tr data-detail-url="{{ url_for('main.course_detail', id=course.id) }}">
                        <td>{{ course.id }}</td>
                        <td>
                            <img src="{{ url_for('static', filename='uploads/' + course.image) }}" alt="{{ course.name }}" class="img-thumbnail" style="width: 60px; height: 60px; object-fit: cover;">
                        </td>
                        <td>{{ course.name }}</td>
                        <td>
                            {% if course.type == '体验潜水' %}
                            <span class="badge bg-info">体验潜水</span>
                            {% elif course.type == '执证潜水' %}
                            <span class="badge bg-success">执证潜水</span>
                            {% elif course.type == '考证课程' %}
                            <span class="badge bg-warning">考证课程</span>
                            {% endif %}
                        </td>
                        <td>¥{{ course.price }}</td>
                        <td>{{ course.duration }}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#editCourseModal{{ course.id }}">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteCourseModal{{ course.id }}">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                            
                            <!-- 编辑课程模态框 -->
                            <div class="modal fade" id="editCourseModal{{ course.id }}" tabindex="-1" aria-labelledby="editCourseModalLabel{{ course.id }}" aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <form method="post" action="{{ url_for('main.admin_edit_course', id=course.id) }}" enctype="multipart/form-data">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editCourseModalLabel{{ course.id }}">编辑课程</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="name{{ course.id }}" class="form-label">课程名称</label>
                                                            <input type="text" class="form-control" id="name{{ course.id }}" name="name" value="{{ course.name }}" required>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="type{{ course.id }}" class="form-label">课程类型</label>
                                                            <select class="form-select" id="type{{ course.id }}" name="type" required>
                                                                <option value="体验潜水" {% if course.type == '体验潜水' %}selected{% endif %}>体验潜水</option>
                                                                <option value="执证潜水" {% if course.type == '执证潜水' %}selected{% endif %}>执证潜水</option>
                                                                <option value="考证课程" {% if course.type == '考证课程' %}selected{% endif %}>考证课程</option>
                                                            </select>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="price{{ course.id }}" class="form-label">价格</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">¥</span>
                                                                <input type="number" class="form-control" id="price{{ course.id }}" name="price" value="{{ course.price }}" min="0" step="0.01" required>
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="duration{{ course.id }}" class="form-label">时长</label>
                                                            <input type="text" class="form-control" id="duration{{ course.id }}" name="duration" value="{{ course.duration }}" required>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="mb-3">
                                                            <label for="image{{ course.id }}" class="form-label">课程图片</label>
                                                            <input type="file" class="form-control" id="image{{ course.id }}" name="image" accept="image/*">
                                                            <div class="form-text">留空表示不修改图片</div>
                                                            <div class="mt-2">
                                                                <img src="{{ url_for('static', filename='uploads/' + course.image) }}" alt="{{ course.name }}" class="img-thumbnail" style="max-height: 150px;">
                                                            </div>
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="description{{ course.id }}" class="form-label">课程描述</label>
                                                            <textarea class="form-control" id="description{{ course.id }}" name="description" rows="7" required>{{ course.description }}</textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                <button type="submit" class="btn btn-primary">保存</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 删除课程确认模态框 -->
                            <div class="modal fade" id="deleteCourseModal{{ course.id }}" tabindex="-1" aria-labelledby="deleteCourseModalLabel{{ course.id }}" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="deleteCourseModalLabel{{ course.id }}">确认删除</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <p>您确定要删除课程 "{{ course.name }}" 吗？此操作不可撤销。</p>
                                            <p class="text-danger">注意：删除课程将同时删除与该课程相关的所有预约记录。</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                            <a href="{{ url_for('main.admin_delete_course', id=course.id) }}" class="btn btn-danger">删除</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- 分页 -->
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if pagination.has_prev %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.admin_courses', page=pagination.prev_num, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">上一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
                </li>
                {% endif %}
                
                {% for page in pagination.iter_pages() %}
                    {% if page %}
                        {% if page != pagination.page %}
                        <li class="page-item">
                            <a class="page-link" href="{{ url_for('main.admin_courses', page=page, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">{{ page }}</a>
                        </li>
                        {% else %}
                        <li class="page-item active" aria-current="page">
                            <span class="page-link">{{ page }}</span>
                        </li>
                        {% endif %}
                    {% else %}
                        <li class="page-item disabled">
                            <a class="page-link" href="#">...</a>
                        </li>
                    {% endif %}
                {% endfor %}
                
                {% if pagination.has_next %}
                <li class="page-item">
                    <a class="page-link" href="{{ url_for('main.admin_courses', page=pagination.next_num, search=request.args.get('search', ''), filter=request.args.get('filter', '')) }}">下一页</a>
                </li>
                {% else %}
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1" aria-disabled="true">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
    </div>
</div>

<!-- 添加课程模态框 -->
<div class="modal fade" id="addCourseModal" tabindex="-1" aria-labelledby="addCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="post" action="{{ url_for('main.admin_add_course') }}" enctype="multipart/form-data">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCourseModalLabel">添加课程</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">课程名称</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="type" class="form-label">课程类型</label>
                                <select class="form-select" id="type" name="type" required>
                                    <option value="" selected disabled>请选择课程类型</option>
                                    <option value="体验潜水">体验潜水</option>
                                    <option value="执证潜水">执证潜水</option>
                                    <option value="考证课程">考证课程</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="price" class="form-label">价格</label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" class="form-control" id="price" name="price" min="0" step="0.01" required>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="duration" class="form-label">时长</label>
                                <input type="text" class="form-control" id="duration" name="duration" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="image" class="form-label">课程图片</label>
                                <input type="file" class="form-control" id="image" name="image" accept="image/*" required>
                            </div>
                            <div class="mb-3">
                                <label for="description" class="form-label">课程描述</label>
                                <textarea class="form-control" id="description" name="description" rows="10" required></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">添加</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %} 